<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="真实姓名">
              <a-input placeholder="请输入真实姓名" v-model="queryParam.realname"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeys.length }}</a
        >项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange"
      >
        

        <template slot="approveOpinionSlot" slot-scope="text, record">
          <a-textarea
            :rows="2"
            v-model="record.approveOpinion"
            placeholder="注:（审核通过默认无意见）"
            v-if="record.approveStatus === 0"
          />
          <span v-if="record.approveStatus === 1">{{
            record.approveOpinion === null ? '无意见' : record.approveOpinion
          }}</span>
          <span v-if="record.approveStatus === 2">{{ record.approveOpinion }}</span>
        </template>

        <template slot="imageSlot" slot-scope="text, record">
          <img :src="getAvatar(record.image)" alt="" style="width: 100px; cursor: pointer" v-viewer />
        </template>

        <template slot="trainSlot" slot-scope="text, record">
          <div class="badge" v-if="record.withdrawalStatus === 1" style="background-color: #bbe6e3; color: #3a9b94">
            已支付
          </div>
          <div class="badge" style="background-color: #ffdede; color: #ff5e5e" v-else>
            未支付
          </div>
        </template>

        <span slot="action" slot-scope="text, record">
          <a @click="imageApprove(record)" v-if="record.withdrawalStatus === 0">确认提现</a>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import dProgress from './component/ProGress'
import { DATA_MONITOR, DATA_MONITOR_TEST, DATA_MONITOR_INDEX } from '@/store/mutation-types'
import { mapActions, mapGetters, mapState } from 'vuex'
import Vue from 'vue'
import { getFileAccessHttpUrl, getAction } from '@/api/manage'
export default {
  name: 'WithdrawalManagement',
  mixins: [JeecgListMixin],
  components: {
    dProgress,
  },
  data() {
    return {
      description: '文件列表',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '提现单号',
          align: 'center',
          width: 150,
          dataIndex: 'withdrawalNumber',
        },
        {
          title: '真实姓名',
          align: 'center',
          width: 150,
          dataIndex: 'realname',
        },
        {
          title: '提现方式',
          align: 'center',
          width: 180,
          dataIndex: 'type',
          customRender: function (type) {
            if (type === 1) {
              return '微信'
            } else {
              return '支付宝'
            }
          },
        },

        {
          title: '提现金额（元）',
          align: 'center',
          dataIndex: 'withdrawalMoney',
        },
        {
          title: '微信账号',
          align: 'center',
          width: 200,
          dataIndex: 'wechatAccount',
        },
        {
          title: '收款码',
          align: 'center',
          width: 200,
          dataIndex: 'image',
          scopedSlots: { customRender: 'imageSlot' },
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'withdrawalStatus',
          scopedSlots: { customRender: 'trainSlot' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        upload: '/sys/oss/file/upload',
        list: '/withdrawal/api/list',
        delete: '/sys/oss/file/delete',
        minioUpload: '/sys/upload/uploadMinio',
      },
      timer: null, //定时器名称
      dataLock: true,
      progressQuantity: 0,
      progressStarts: 0,
      clickDisBtn: false,
    }
  },
  computed: {
    uploadAction() {
      return window._CONFIG['domianURL'] + this.url.upload
    },
    minioUploadAction() {
      return window._CONFIG['domianURL'] + this.url.minioUpload
    },
    fullApproveOpinion(index) {
      return this.approveOpinion + index
    },
  },
  mounted() {
    console.log('dataMonitor', this.dataMonitor())
    console.log('dataMonitorTest', this.dataMonitorTest())
    console.log('dataMonitorIndex', this.dataMonitorIndex())

    let dataMonitor = this.dataMonitor()
    let dataMonitorTest = this.dataMonitorTest()
    let dataMonitorIndex = this.dataMonitorIndex()

    this.$nextTick(function () {
      if (dataMonitor === null) {
        this.dataLock = true
      } else {
        // dataMonitorTest[dataMonitorIndex].status = 1
        // console.log('dataMonitor1',dataMonitorTest)
        // this.dataSource = dataMonitorTest

        this.progressStarts = dataMonitorIndex
        // this.setTime()
      }
    })
  },
  beforeDestroy() {
    this.clearIntval()
  },
  methods: {
    ...mapGetters(['dataMonitor', 'dataMonitorTest', 'dataMonitorIndex']),
    imageApprove(data, index) {
      var that = this
      that.$confirm({
        title: '提现',
        content: '是否确认提现?',
        onOk: function () {
          that.loading = true
          that.$http
            .post('/withdrawal/api/confirm', data)
            .then((res) => {
              console.log('res', res)
              that.loading = false
              if (res.success) {
                that.$message.success('确认提现完成')
                that.loadData(that.ipagination.current)
              } else {
                that.$message.info(res.message)
              }
            })
            .catch((error) => {
              console.log('error', error)
            })
        },
      })
    },
    getAvatar(img) {
      // console.log('getFileAccessHttpUrl(this.avatar())', getFileAccessHttpUrl(img))
      return getFileAccessHttpUrl(img)
    },
    clearIntval() {
      clearInterval(this.timer) // 清除定时器
      this.timer = null
    },
    setTime() {
      this.timer = setInterval(() => {
        this.progressQuantity++
        if (this.progressQuantity === 99) {
          this.clearIntval()
        }
        console.log('this.progressQuantity = 0', this.progressQuantity)
      }, 1500)
    },
    beforeUpload(file) {
      console.log('file', file)
      var fileType = file.type
      var occFile = fileType.split('/')
      console.log('occFile', occFile)
      if (fileType === 'image') {
        if (fileType.indexOf('image') < 0) {
          this.$message.warning('请上传图片')
          return false
        }
      } else if (fileType === 'file') {
        if (fileType.indexOf('image') >= 0) {
          this.$message.warning('请上传文件')
          return false
        }
      } else if (occFile[1] !== 'pdf') {
        this.$message.warning('请上传pdf文件')
        return false
      }
      return true
    },
    handleChange(info) {
      console.log('info', info)
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          this.loadData()
          this.$message.success(`${info.file.name} 上传成功!`)
        } else {
          this.$message.error(`${info.file.response.message}`)
        }
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.response.message}`)
      }
    },
    ossDelete(id) {
      var that = this
      that.$confirm({
        title: '确认删除',
        content: '是否删除选中文件?',
        onOk: function () {
          that.handleDelete(id)
        },
      })
    },
    trainId(data, index) {
      console.log('data', data)
      console.log('index', index)

      var that = this

      if (index === '2') {
        if (data.approveOpinion === null) {
          this.$message.info('请填写审批意见')
          return
        }

        data.approve = false
        that.$confirm({
          title: '驳回图片',
          content: '是否驳回该图片?',
          onOk: function () {
            that.loading = true
            that.$http
              .post('/imageapprove/api/approve', data)
              .then((res) => {
                console.log('res', res)
                that.loading = false
                if (res.success) {
                  that.$message.success('驳回成功')
                  that.loadData(that.ipagination.current)
                } else {
                  that.$message.info(res.message)
                }
              })
              .catch((error) => {
                console.log('error', error)
              })
          },
        })
      } else {
        if (data.categoryId === null) {
          this.$message.info('请选择分类')
          return
        }
        data.approve = true
        data.approveOpinion = data.approveOpinion === null ? '无意见' : data.approveOpinion
        that.$confirm({
          title: '审核图片',
          content: '是否通过审核?',
          onOk: function () {
            that.loading = true
            that.$http
              .post('/imageapprove/api/approve', data)
              .then((res) => {
                console.log('res', res)
                that.loading = false
                if (res.success) {
                  that.$message.success('审核通过')
                  that.loadData(that.ipagination.current)
                } else {
                  that.$message.info(res.message)
                }
              })
              .catch((error) => {
                console.log('error', error)
              })
          },
        })
      }
    },
    setHandle(id, index) {
      var setData = JSON.parse(JSON.stringify(this.dataSource))
      var setData1 = JSON.parse(JSON.stringify(this.dataSource))
      setData[index].train = 0
      setData1[index].train = 1
      Vue.ls.set(DATA_MONITOR, setData, 7 * 24 * 60 * 60 * 1000)
      this.$store.commit('SET_DATA_MONITOR', setData)
      Vue.ls.set(DATA_MONITOR_TEST, setData1, 7 * 24 * 60 * 60 * 1000)
      this.$store.commit('SET_DATA_MONITOR_TEST', setData1)
      Vue.ls.set(DATA_MONITOR_INDEX, index, 7 * 24 * 60 * 60 * 1000)
      this.$store.commit('SET_DATA_MONITOR_INDEX', index)
      this.setTime()
    },
    handleTrain(id, index) {
      getAction('/sys/oss/file/train', { id: id })
        .then((res) => {
          console.log('res', res)
          if (res.code === '200') {
            this.progressQuantity = 100
            this.$message.success('训练成功')
            this.loadData()
          } else {
            this.progressQuantity = 0
            this.$message.info(res.message)
            this.clickDisBtn = false
          }
        })
        .finally(() => {
          Vue.ls.remove(DATA_MONITOR)
          Vue.ls.remove(DATA_MONITOR_TEST)
          Vue.ls.remove(DATA_MONITOR_INDEX)
          this.clearIntval()
          this.tableLoading = false
        })
    },
    handlePreview(record) {
      console.log('record', record)
      if (record && record.url) {
        let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(record.url)
        window.open(url, '_blank')
      }
    },
  },
}
</script>

<style scoped>
@import '~@assets/less/common.less';
.badge {
  line-height: 1.5;
  border-radius: 0.25rem;
  font-size: 12px;
  font-weight: 400;
  padding: 5px 12px;
}
</style>
